let storage = window.localStorage;
//let scriptName = document.currentScript.dataset.scriptName;
//console.log(scriptName);
//must <script src="assets/js/dom.js" data-script-name="script.js"></script>
function get_nextsibling(x) {
  while (x.nodeType != ELEMENT_NODE) {
    x = x.nextSibling;
  }
  return x;
}
function node2xml(reserved, parentNode) {
  node = parentNode.childNodes;
  dev = document.createElement("dev");
  cell = document.createElement("dev");
  dev.appendChild(cell);
  for (const son of node) {
    if (son.nodeType != ELEMENT_NODE) {
      continue;
    }
    grandson = get_nextsibling(son.childNodes[0]);
    if (grandson.name) {
      console.log("name", grandson.name);
      console.log("value", grandson.value);
      cell.setAttribute(grandson.name, grandson.value);
    }
    //cell.setAttribute("grandson.name", grandson.value);
  }
  return dev;
}
/*
function xml2sidebar (elementId, message) {
  var element = document.getElementById(elementId);
  var h = document.createElement("h4");
  element.appendChild(h);
  var ul = document.createElement("ul");
  element.appendChild(ul);
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(message, "text/xml");
  root = xmlDoc.documentElement;
  h.innerHTML = root.getAttribute("dbName");
  child = root.childNodes[0];
  elementNode = get_nextsibling(child);
  children = root.childNodes;
  if (1) {
    for (const node of children) {
      if (node.nodeType != ELEMENT_NODE) {
        continue;
      }
      //const clonedNode = node.cloneNode(true);
      li = document.createElement("li");
      ul.appendChild(li);
      var attributes = node.attributes;
      for (var j = 0; j < attributes.length; j++) {
        var attrName = attributes[j].name;  // 属性名
        var attrValue = attributes[j].value;  // 属性值
        //console.log("属性名称: " + attrName + ", 属性值: " + attrValue);
        if (attrName == 'name') {
          var a = document.createElement("a");
          //a.href = '/' + attrValue;
          a.href = '#';
          console.log('value:', attrValue);
          //a.onclick = updateContent(attrValue);
          a.title = attrValue;
          a.onclick = function() {
            var target = event.target;
            console.log('a.title:', target.title);
            storage.tablename = target.title;
            db_set_callback("select * from '" + storage.tablename + "';",
              'content', xml2tables);
          }
          a.innerHTML = attrValue;
          li.appendChild(a);
        }
      }
    }
  }
  if (0) {
    for (const node of children) {
      var row = table.insertRow(rowCount);
      var attributes = node.attributes;
      for (var j = 0; j < attributes.length; j++) {
        var attrName = attributes[j].name;  // 属性名
        var attrValue = attributes[j].value;  // 属性值
        console.log("属性名称: " + attrName + ", 属性值: " + attrValue);
        var cell = row.insertCell(j);
        var input = document.createElement("input");
        input.id = attrName + rowCount;
        input.value = attrValue;
        cell.appendChild(input);
      }
      rowCount++;
    }
  }
}
function xml2tables (elementId, message) {
  var element = document.getElementById(elementId);
  if (!element) {
    console.log("[DEBUG] no this element:", elementId);
    return;
  }
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
  var table = document.createElement("table");
  element.appendChild(table);
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(message, "text/xml");
  root = xmlDoc.documentElement;
  child = root.childNodes[0];
  if (!child)
    return;
  elementNode = get_nextsibling(child);
  children = root.childNodes;

  var rowCount = table.rows.length;
//header
  {
    var thead = document.createElement("thead");
    table.appendChild(thead);
    var tr = document.createElement("tr");
    thead.appendChild(tr);
    //var row = table.insertRow(rowCount);
    var attributes = elementNode.attributes;
    for (var j = 0; j < attributes.length; j++) {
      var attrName = attributes[j].name;
      var label = document.createElement("label");
      label.innerText = attrName;
      var th = document.createElement("th");
      th.appendChild(label);
      tr.appendChild(th);
    }
    thead.style.position = 'sticky';
    thead.style.top = '0';
    thead.style.width = '100%';
    thead.style.zIndex = '10';
    thead.style.backgroundColor = '#f2f2f2';
    rowCount++;
  }
  if (1) {
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);
    for (const node of children) {
      if (node.nodeType != ELEMENT_NODE) {
        continue;
      }
      //const clonedNode = node.cloneNode(true);
      tr = document.createElement("tr");
      var attributes = node.attributes;
      for (var j = 0; j < attributes.length; j++) {
        var attrName = attributes[j].name;  // 属性名
        var attrValue = attributes[j].value;  // 属性值
        //console.log("属性名称: " + attrName + ", 属性值: " + attrValue);
        var td = document.createElement("td");
        var cell = document.createElement("input");
        cell.id = attrName + rowCount;
        cell.type = 'text';
        cell.name = attrName;
        cell.value = attrValue;
        cell.innerText = attrValue;
        td.appendChild(cell);
        tr.appendChild(td);
      }
      td = document.createElement("td");
      const form = document.createElement("form");
      form.action = "/submit";
      form.method = "POST";
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.open("post", "update" , true);
        xhr.onload = function() {
          if (xhr.status === 200) {
            console.log(xhr.responseText);  // 处理响应数据
          }
        };
        xhr.onerror = function() {
          console.error('Request failed');
        };
        dev = node2xml("", tr);
        console.log('Form data:', dev.outerHTML);
        xhr.send(dev.outerHTML);
  //      form.submit(dev.outerHTML);
      });

      const button = document.createElement("button");
      button.type = "submit";
      button.textContent = "提交";
      form.appendChild(button);
      td.appendChild(form);
      tr.appendChild(td);

      tbody.appendChild(tr);
    }
    //tbody.style.position = 'fixed';
    //tbody.style.top = '32';
    //tbody.style.width = '100%';
    //tbody.style.zIndex = '10';
    //tbody.style.backgroundColor = '#f2f2f2';
    //table.appendChild(tbody);
  }
  if (0) {
    for (const node of children) {
      var row = table.insertRow(rowCount);
      var attributes = node.attributes;
      for (var j = 0; j < attributes.length; j++) {
        var attrName = attributes[j].name;  // 属性名
        var attrValue = attributes[j].value;  // 属性值
        console.log("属性名称: " + attrName + ", 属性值: " + attrValue);
        var cell = row.insertCell(j);
        var input = document.createElement("input");
        input.id = attrName + rowCount;
        input.value = attrValue;
        cell.appendChild(input);
      }
      rowCount++;
    }
  }
}
*/
function get_file(url, elementId) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById(elementId).innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}
function page_layout() {
  const container = document.getElementById('container');
  const sidebar = document.getElementById('sidebar');
  const content = document.getElementById('content');

  container.style.display = 'flex';  // 设置容器为flex布局
  container.style.height = '90vh';

  sidebar.style.width = '200px';  // 设置左侧导航栏宽度
  sidebar.style.backgroundColor = '#E7E9EB';  // 设置背景颜色为深色
  //sidebar.style.color = 'blue';  // 设置文字颜色为白色
  sidebar.style.padding = '20px';  // 添加内边距
  sidebar.style.boxSizing = 'border-box';  // 让padding不会影响元素总宽度
  sidebar.style.height = '90vh';

  content.style.flex = '1';  // 右侧内容区域占据剩余空间
  content.style.padding = '20px';  // 添加内边距
  content.style.backgroundColor = 'white';  // 设置背景颜色为白色
  content.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';  // 添加阴影效果
  content.style.height = '80vh';

  const links = sidebar.querySelectorAll('a');
  links.forEach(link => {
    link.style.color = 'white';  // 设置链接颜色为白色
    link.style.textDecoration = 'none';  // 去掉下划线
    link.style.fontSize = '18px';  // 设置字体大小
    link.addEventListener('mouseover', () => {
      link.style.textDecoration = 'underline';  // 鼠标悬停时添加下划线
    });
    link.addEventListener('mouseout', () => {
      link.style.textDecoration = 'none';  // 鼠标离开时去掉下划线
    });
  });

  // 设置列表项样式
  const listItems = sidebar.querySelectorAll('li');
  listItems.forEach(item => {
    item.style.margin = '15px 0';  // 设置列表项的上下间距
  });

}
/*
export function db_set_callback(statement, elementId, func) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', "/sql");
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('responseText:', xhr.responseText);
      result = xhr.responseText;
      element = document.getElementById(elementId);
      func(elementId, result);
    } else {
      console.error('request failure:', xhr.status);
      document.getElementById("response").innerText = '请求失败，请稍后再试';
    }
  };
  xhr.send(statement);
}
*/
